<template>
  <div class="app-container home">
    <!--  <div class="headerPic"></div> -->
    <div class="homeBtn">
      <el-button @click="handleHome('introduce')" :class="{home_active:activeBtn=='introduce'}">平台简介</el-button>
      <el-button @click="handleHome('notice')" :class="{home_active:activeBtn=='notice'}">通知公告</el-button>
      <el-button @click="handleHome('knowledge')" :class="{home_active:activeBtn=='knowledge'}">地热知识</el-button>
    </div>
    <el-card class="box-card homeContent" shadow="never">
      <div class="home_introduce" v-show="activeBtn =='introduce'">
        <div class="introduce_title">背景</div>
        <p class="title_content">
          社会经济的快速和稳步增长需要足够的能源作支撑，但现如今中国能源不足问题正逐渐显现，必将影响今后经济的良好发展。地热资源是一种新型的可再生能源，与煤、石油、天然气等传统的化石能源相比，地热能具有清洁、环保、就地取用等优势。在可再生能源家族中，地热是唯一的来自地球内部的能量。地热资源是一种清洁的能源，基本上不污染大气，也不排放温室气体。从世界来看，地热能已经能比较成熟并广泛的应用于发电、供暖、洗浴、和医疗保健等与居民生活密切相关的领域。我国已初步形成以供暖、洗浴、种植等直接利用方式为主，并积极发展高温发电的地热资源开发利用格局。
        </p>
        <div class="introduce_title">意义</div>
        <p class="title_content">
          社会经济的快速和稳步增长需要足够的能源作支撑，但现如今中国能源不足问题正逐渐显现，必将影响今后经济的良好发展。地热资源是一种新型的可再生能源，与煤、石油、天然气等传统的化石能源相比，地热能具有清洁、环保、就地取用等优势。在可再生能源家族中，地热是唯一的来自地球内部的能量。地热资源是一种清洁的能源，基本上不污染大气，也不排放温室气体。从世界来看，地热能已经能比较成熟并广泛的应用于发电、供暖、洗浴、和医疗保健等与居民生活密切相关的领域。我国已初步形成以供暖、洗浴、种植等直接利用方式为主，并积极发展高温发电的地热资源开发利用格局。为了实现地热资源的科学开发、利用、管理、保护，建立地热资源信息管理平台，对地热资源的数据进行有效的存储和管理，并进行三维模型建立分析、地热资源储量计算评价、专题图生成等操作，为地热资源开发利用提供有效决策依据，帮助管理者更有效地制定开发利用规划，提高管理者统筹全局的能力。
        </p>
        <div class="introduce_title">功能介绍</div>
        <div class="function_content">
          <div class="functions">
            <el-tree :data="function_trees" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
          </div>
          <p class="function_introduce">{{activeFunIntroduce}}</p>
        </div>
      </div>
      <div class="home_notice" v-show="activeBtn =='notice'">
        <el-collapse v-model="activeNames" @change="handleNoticeChange">
          <el-collapse-item v-for="item in noticeList" :key="item.noticeId">
            <template slot="title">
              <div class="title">{{item.noticeTitle}}</div>
              <div class="titletype">
                <dict-tag :options="dict.type.sys_notice_type" :value="item.noticeType" />
              </div>
              <div class="titleCreateBy">
                {{item.createBy}}
              </div>
              <div class="titleCreateTime">
                {{item.createTime}}
              </div>
            </template>
            <div v-html="item.noticeContent"></div>
          </el-collapse-item>
        </el-collapse>
        <pagination v-show="noticeTotal>0" :total="noticeTotal" :page.sync="noticeQueryParams.pageNum" :limit.sync="noticeQueryParams.pageSize" @pagination="getNoticeList" />
      </div>

      <div class="home_knowledge" v-show="activeBtn =='knowledge'">
        <el-card class="single_knowledge" v-for="item in knowledges" :key="item.id" shadow="hover">
          <el-image style="width: 100%; height: 200px" :src="baseURL+item.imagepath" class="home_knowledge_img"></el-image>
          <div style="padding: 10px;">
            <span>{{item.title }}</span><br>
            <span>{{  parseTime(item.time, '{y}-{m}-{d} {h}:{m}')}}</span><br>
            <el-popover placement="right" width="600" trigger="click">

              <h1>{{item.title}}</h1>
              <p>{{item.content}}</p>

              <el-button slot="reference" type="text">查看</el-button>
            </el-popover>
          </div>
        </el-card>
      </div>

    </el-card>
  </div>
</template>

<script>
import { listKnowledge, getKnowledge, delKnowledge, addKnowledge, updateKnowledge } from "@/api/warning/geo_knowledge";
import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice";
export default {
  name: "Index",
  dicts: ['sys_notice_status', 'sys_notice_type'],
  data() {
    return {
      // 总条数
      noticeTotal: 0,
      // 公告表格数据
      noticeList: [],
      baseURL: '/dev-api',
      activeNames: ['1'],
      activeBtn: 'introduce',
      activeFunIntroduce: '基于WEBGIS地热资源信息管理平台开发项目的主要内容为：结合地热资源管理核心业务需求，建设地热资源数据交互共享中心、地热信息“一张图”综合服务系统、地热业务信息综合管理系统、系统管理系统',
      function_trees: [
        {
          label: '地热信息',
          introduce: '地热资源数据交互共享中心主要负责平台数据的采集、存储、管理、共享、交互、服务应用系统等功能。存储业务数据和GIS数据，设计数据采集服务接口，实现数据的填报、导入、转换等数据采集功能。设计数据访问服务接口调度业务数据和GIS数据',
          children: [
            {
              label: '项目基本信息',
              introduce: '以二维GIS地图为背景，结合项目基本信息列表，加上项目基本信息属性编辑框，可以针对项目基本信息进行新增、修改、删除和查询操作，同时可针对项目中涉及的热力井基本信息进行新增、修改、删除和查询操作。'
            }, {
              label: '地热井信息',
              introduce: '可根据地热井名称、地热井类型（抽水井、回水井），利用方式（地下水源热泵型、土壤源热泵型、中深层热泵型）、使用状态（禁用、启用）信息搜索查看相关地热井，并可以新增、修改、删除、导出相关地热井信息。'
            },
            {
              label: '监测设备信息',
              introduce: '可根据监测设备的设备编号、隶属编号、出厂日期、使用状态（禁用、启用）信息搜索查看相关监测设备，并可以新增、修改、删除、导出相关监测设备信息。'
            },
            {
              label: '文档资料',
              children: [
                {
                  label: '地热分布资料',
                  introduce: '可以上传和查看地热分布图、开发利用图、构造关系图、地热成因图，并可在在图片下方详细列表栏查看上传历史。在上传历史中查看上传时间，上传人，上传的历史图片，并且选择启用或者禁用哪张图片。'
                },
                {
                  label: '项目基本资料',
                  introduce: '根据项目名称、利用方式（地下水源热泵型、土壤源热泵型、中深层热泵型）、使用状态（禁用、启用）信息搜索查看相关地热井，并可以新增、修改、删除、导出相关项目基本资料信息。点击项目列表栏的项目基本资料按钮可以上传和查看相关的项目柱状图或者水质分析图， 并且上传可查看其它相关的项目基本资料。'
                }
              ]
            }]
        },
        {
          label: '监测数据',
          introduce: '可根据地热井名称、开始时间和结束时间、监测值这些相关的设置条件搜索查看相关项目信息，并可以新增、修改、删除、导出相关项目基本资料信息。',
          children: [{
            label: '瞬时流量',
            introduce: '可根据地热井名称、开始时间和结束时间、瞬时流量值这些相关的设置条件搜索查看相关项目信息，并可以新增、修改、删除、导出相关项目基本资料信息。'
          },
          {
            label: '瞬时回灌量',
            introduce: '可根据地热井名称、开始时间和结束时间、瞬时回灌量量值这些相关的设置条件搜索查看相关项目信息，并可以新增、修改、删除、导出相关项目基本资料信息。'
          },
          {
            label: '累计流量',
            introduce: '可根据地热井名称、开始时间和结束时间、瞬时累计流量值这些相关的设置条件搜索查看相关项目信息，并可以新增、修改、删除、导出相关项目基本资料信息。'
          },
          {
            label: '水温',
            introduce: '可根据地热井名称、开始时间和结束时间、水温值这些相关的设置条件搜索查看相关项目信息，并可以新增、修改、删除、导出相关项目基本资料信息。'
          },
          {
            label: '回水温',
            introduce: '可根据地热井名称、开始时间和结束时间、回水温值这些相关的设置条件搜索查看相关项目信息，并可以新增、修改、删除、导出相关项目基本资料信息。'
          },
          {
            label: '水位',
            introduce: '可根据地热井名称、开始时间和结束时间、水位值这些相关的设置条件搜索查看相关项目信息，并可以新增、修改、删除、导出相关项目基本资料信息。'
          },
          {
            label: '回水位',
            introduce: '可根据地热井名称、开始时间和结束时间、回水位值这些相关的设置条件搜索查看相关项目信息，并可以新增、修改、删除、导出相关项目基本资料信息。'
          },
          {
            label: '累计回灌量',
            introduce: '可根据地热井名称、开始时间和结束时间、回灌量值这些相关的设置条件搜索查看相关项目信息，并可以新增、修改、删除、导出相关项目基本资料信息。'
          },
          ]
        },
        {
          label: '统计分析',
          introduce: '可以统计项目的水质数据、监测数据（瞬时流量、累计流量、瞬时回灌量、累计回灌量、水温、回水温、水位、回水位）、项目数据、地热井数据，并且导出相关报表。',
          children: [{
            label: '水质数据',
            introduce: '大屏上可实时显示当前项目中水质数据遭受污染的水源数量、当前项目中已有的监控地热井水源的数量、触发预警信息的地热井水源数量。污染水源数量图折线图显示污染水源数量随时间的变化；热水井水源质量柱状图显示热水井水源质量随时间的改变；预警热水井数量柱状图显示预警热水井随时间的改变；预警水源处置饼状图显示预警水源已处置、预警水源未处置、正常热水井三个部分各个部分占比的饼状图。并可导出水质数据的报表。'
          },
          {
            label: '监测数据',
            introduce: '大屏上可实时显示当前项目中监测的瞬时流量、累计流量、水位、水温值。瞬时流量折线图折线图显示瞬时流量随时间的变化；累计回灌量柱状图显示累计回灌量随时间的改变；水位折线图显示水位随时间的改变；水温折线图显示水温随时间的改变。并可导出监测数据的报表。'
          },
          {
            label: '项目数据',
            introduce: '大屏上可实时显示当前的项目数据总数、当前项目数据中利用方式为土壤源热泵型的项目数量、地下水源热泵型的项目数量、中深层水热型的项目数量。各市供暖面积柱状图显示供暖面积随各地级市的改变；利用方式饼状图显示土壤源热泵型、地下水源热泵型、中深层水热型各个类型所占的比例生产的饼状图。并可导出相关的项目数据报表。'
          },
          {
            label: '地热井数据',
            introduce: '大屏上可实时显示当前项目中的预警地热井的数量、抽水井的数量、回水井的数量。当前水位折线图显示水位随时间的改变；报警地热井数量图显示报警地热井数量随时间的改变；地热井类型所占比例饼状图显示项目数据中抽水井、回水井、未知三类各个部分所占的比例得到饼状图。并可导出相关的地热井数据报表。'
          },
          {
            label: '统计报表',
            introduce: '可以统计水质数据、监测数据、项目数据、地热井数据这4个统计数据，可勾选需要的相关报表，导出先关报表。'
          }]
        }, {
          label: '储量计算与评价',
          introduce: '在有数据层作为支撑的基础上，为了统计信息、辅助决策，系统提供地热资源储量的计算与评价功能，针对地热储量、地热体流量、可利用热能量等值得关注的地热资源信息进行统计。系统提供交互式界面，帮助用户选择要统计的信息、统计范围、统计方法，计算完成后，通过表格、统计图等方法将统计数据展示给用户。',
          children: [{
            label: '资源储量计算',
            introduce: '利用热储层的技术参数（包括水温、水质、水量等），查明各热储层的孔隙度、有效孔隙度、渗透系数、压力传指系数等参数及地热流体的温度、压力、矿量及化学组分、微量元素成分等，根据规范公式进行计算资源储量，为地热资源的储量计算及地热流体的利用评价提供依据。'
          },
          {
            label: '资源可开采量计算',
            introduce: '用热储法计算出的地热资源量不可能全部被开采出来，只能开采出一部分，应计算开采量。地热资源可开采量即为可利用地热资源量，可利用地热资源量采用回收率法进行计算，可计算得出当前资源的可开采量。'
          },
          {
            label: '资源储量评价',
            introduce: '地热资源储量评价主要是指对地热存在区域内的地热能、地热流体的数量和质量作出估计，是进行合理开发利用规划的前提。'
          },
          ]
        }, {
          label: '预警决策',
          introduce: '根据行业要求规划预警决策处置业务流程，其中包括要求设定预警等级、相应决策处置预案及处置结果反馈，功能模块包括：监测数据报警管理、预警信息管理、决策预案管理和地热资源勘探知识库四个方面。',
          children: [{
            label: '监测报警管理',
            introduce: '监测数据报警管理除了可对瞬时流量、累计流量、水位、设备状态等监测项设置阈值，当监测数据超过阈值进行报警，当出回水比例失调和设备工作状态出现异常直接向相关工作人员发出报警（以系统警示、资讯等方式），及时发现险情或有效避免设备故障提供智慧提醒，还可以通过设定不同监测项的阈值与预警等级挂钩。',
          },
          {
            label: '预警信息管理',
            introduce: '为解决监测数据报警提供查询（包含监测项目及触发预警数据的信息查看，及查询定位功能）消除操作功能，并且可按照预警等级对应处置流程触发不同预案响应，如触发预警等级将以预警事件形式触发预警决策响应。'
          },
          {
            label: '决策预案管理',
            introduce: '依据相关法律法规制订的决策预案信息管理，内容包括：决策预案人员管理、决策预案管理、决策分析管理和决策响应结果管理。'
          },
          {
            label: '地热勘探知识库',
            introduce: '地热相关基础数据和资料的录入，为未勘探过的中深层水热型地热的地区提供地热靶区选择建议。'
          },
          ]
        },
        {
          label: '系统管理',
          introduce: '系统管理主要实现对平台运行信息的管理，主要包括用户管理、角色管理、菜单管理、部门管理、岗位管理、字典管理、通知管理、日志管理。',
          children: [{
            label: '用户管理',
            introduce: '根据相关部门、用户名称、手机号码、状态（正常、停用）、创建时间这些限制条件搜索相关用户，并可新增、修改、删除、导入、导出相关用户信息。'
          },
          {
            label: '角色管理',
            introduce: '根据角色名称、权限字符、状态（正常、停用）、创建时间这些限制条件搜索相关角色，并可新增、修改、删除、导入、导出相关角色信息。并且可对每个角色分配相关数据和管理相关用户。'
          },
          {
            label: '菜单管理',
            introduce: '可根据菜单名称、状态（正常、停用）这些限制条件搜索相关菜单，并可新增、修改、删除、导入、导出相关菜单信息（比如图标、菜单名称、显示状态等信息）。'
          },
          {
            label: '部门管理',
            introduce: '可根据部门名称、状态（正常、停用）这些限制条件搜索相关部门，并可新增、修改、删除、导入、导出相关部门信息（比如部门名称、负责人、联系电话、部门状态等信息）。'
          },
          {
            label: '岗位管理',
            introduce: '可根据岗位编码、岗位名称、状态（正常、停用）这些限制条件搜索相关岗位，并可新增、修改、删除、导入、导出相关岗位信息（比如岗位名称、岗位编码、岗位顺序、岗位状态等信息）。',
          },
          {
            label: '字典管理',
            introduce: '可根据字典名称、字典类型、状态（正常、停用）、创建时间这些限制条件搜索相关字典，并可新增、修改、删除、导入、导出相关字典信息（比如字典名称、字典类型、状态等信息）。'
          },
          {
            label: '通知管理',
            introduce: '可根据公告标题、操作人员、类型（通知、公告）这些限制条件搜索相关通知，并可新增、修改、删除、导入、导出相关通知信息（比如公告标题、公告类型、公告内容等信息）。',
          },
          {
            label: '日志管理',
            introduce: '要进行系统日志、数据库日志、用户操作日志的管理。',
            children: [
              {
                label: '操作日志',
                introduce: '可根据系统模块、操作人员、类型（新增、修改、删除、授权、导入、导出、强退、生成代码）、状态（正常、停用）、操作时间这些限制条件搜索相关操作日志，并可删除、清空、导出相关操作日志。'
              },
              {
                label: '登陆日志',
                introduce: '可根据登录地址、用户名称、、状态（正常、停用）、登录时间这些限制条件搜索相关登录日志，并可删除、清空、导出相关操作日志。'
              }
            ]
          },
          ]
        }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      knowledges: [{
        imgSrc: 'http://123.15.32.150:9000/img/default.gif',
        title: '地热知识1',
        time: '2022-01-16 14:01'
      },
      {
        imgSrc: 'http://123.15.32.150:9000/img/default.gif',
        title: '地热知识2',
        time: '2022-01-16 14:01'
      },
      {
        imgSrc: 'http://123.15.32.150:9000/img/default.gif',
        title: '地热知识3',
        time: '2022-01-16 14:01'
      }],
      queryParams: {
        /* pageNum: 1,
        pageSize: 10, */
        title: null,
        time: null,
        inputer: null
      },
      noticeQueryParams: {
        pageNum: 1,
        pageSize: 10,
        noticeTitle: undefined,
        createBy: undefined,
        status: undefined
      },

    };
  },
  methods: {
    /** 查询公告列表 */
    getNoticeList() {
      this.loading = true;
      listNotice(this.noticeQueryParams).then(response => {
        this.noticeList = response.rows;
        this.noticeTotal = response.total;
        this.loading = false;
        console.log(this.noticeList)
      });
    },
    handleHome(btn) {
      this.activeBtn = btn;
      if (btn == "knowledge") {
        this.getList()
      }
    },
    handleNodeClick(tree) {
      console.log(tree)
      this.activeFunIntroduce = tree.introduce;
    },
    handleNoticeChange(val) {
      console.log(val);
    },
    getList() {
      this.loading = true;
      listKnowledge(this.queryParams).then(response => {
        this.knowledges = response.rows;
        console.log(this.knowledges)
        this.loading = false;
      });
    },
  },
  created() {
    console.log(process.env);
    this.baseURL = process.env.VUE_APP_BASE_API;
    this.getList();
    this.getNoticeList();
    console.log(this.$router)
  },

};
</script>

<style scoped lang="scss">
.home {
  display: flex;
  flex-direction: column;
  background-image: url("../assets/images/homepic.png");
  background-repeat: no-repeat;
  background-size: 100% 300px;
  width: 100%;
  .homeBtn {
    padding: 5px 0;
    display: flex;
    justify-content: center;
    justify-items: center;
    .el-button {
      width: 130px;
      height: 40px;
      font-size: 18px;
      color: rgb(17, 17, 17);
      border-radius: 15px;
    }
    .home_active {
      background-color: rgba(1, 128, 128, 0.8);
    }
  }
  .homeContent {
    opacity: 0.8;
    /*  border: 1px solid rgb(224, 4, 151); */
    /* height: 1145px; */
    margin: 20px auto;
    width: 90%;
    .home_introduce {
      .title_content {
        text-indent: 2em;
        line-height: 25px;
      }
      .introduce_title {
        font-size: 20px;
        margin-bottom: 10px;
        padding: 5px 15px;
        background-color: rgb(236, 232, 232);
        box-shadow: 5px 5px 5px rgb(236, 232, 232);
        border-radius: 5px;
      }
      .function_content {
        display: flex;
        .functions {
          border-right: 3px solid rgb(163, 161, 162);
          width: 15%;
          margin-left: 2%;
        }
        .function_introduce {
          padding-left: 2%;
          width: 75%;
          text-indent: 2em;
          padding-top: 20px;
          line-height: 25px;
        }
      }
    }
    .home_notice {
      .title {
        /* margin-left: 20px; */
      }
      .titletype {
        margin-left: 20px;
      }
      .titleCreateBy {
        margin-left: 20px;
      }
      .titleCreateTime {
        margin-left: 20px;
      }
    }
     .home_knowledge {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      .single_knowledge {
        cursor: pointer;
        width: 20%;
        margin-left: 40px;
        margin-top: 20px;
        background-color: rgb(133, 182, 246);
        .home_knowledge_img {
          width: 90%;
          display: block;
        }
        .el-card__body {
          padding: 0;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.home_notice .el-collapse-item__content {
  padding-left: 20px;
}
</style>

